<template>
	<view class="ordering-fls">
		<!-- 商品分类左边 -->
		<view class="ordering-left">
			<block v-for="(item,index) in categoryList" :key="index">
				<text :class="{activeord:index == leftSelect}" @click="categoryClick(index,item)">{{item}}</text>
			</block>
		</view>
		<!-- 商品列表：右边 -->
		<view class="ordering-right">
			<text class="ordering-right-title">{{currentCategoryTitle}}</text>
			<view>
				<block v-for="(item,index) in categoryDetail" :key="index">
					<goods-item :goodsInfo="item"></goods-item>
				</block>
			</view>
		</view>
		<!-- 总价计算区域 -->
		<view class="Shopping">
			<!-- 骑手 -->
			<view class="qishou">
				<image v-if="!cartList.length" src="~@/static/coen/weigou.png" mode="widthFix"></image>
				<image v-else src="~@/static/coen/yigou.png" mode="widthFix"></image>
			</view>
			<!-- 多少量 -->
			<view class="Numbering" v-if="cartList.length">{{totalCount}}</view>
			<!-- 金额 -->
			<view class="Shopping-dis">
				<view class="Shopping-left">
					<view class="Cost-mony">
						<text class="Total-price">¥{{totalPrice}}</text>
						<text class="Delivery">另需配送费{{shopDesc.physical}}元</text>
					</view>
				</view>
				<view class="Shopping-right" :class="{shoppactive: !!cartList.length}"
					@click="!!cartList.length && placeOrder">
					<text v-if="!cartList.length">{{shopDesc.delivering}}元起送</text>
					<text v-if="cartList.length">{{orderBtnTip}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsItem from '../../../components/content/GoodsItem.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			goodsList: {
				type: Array,
				default: []
			},
			shopDesc: {
				type: Object,
				default: {}
			}
		},
		components: {
			GoodsItem
		},
		computed: {
			...mapState(['cartList']),
			// 计算所有商品总数量
			totalCount() {
				return this.cartList.reduce((total, item) => {
					return total + item.count
				}, 0)
			},
			// 所有商品累积的总价
			totalPrice() {
				let totalPrice = this.cartList.reduce((total, item) => {
					return total + item.totalPrice
				}, 0)
				return (Math.round(totalPrice * 10) / 10).toFixed(1)
			},
			// 下单提示
			orderBtnTip() {
				if (this.totalPrice >= this.shopDesc.delivering) {
					return '去结算'
				} else {
					const need = Math.round((this.shopDesc.delivering - this.totalPrice) * 10) / 10
					return '还差' + need.toFixed(1) + '元'
				}
			}
		},
		data() {
			return {
				// 商品分类左边
				leftSelect: 0,
				// 分类列表名
				categoryList: [],
				// 分类商品详情
				categoryDetail: [],
				// 当前分类名称
				currentCategoryTitle: '',
			}
		},
		watch: {
			goodsList() {
				if (!this.goodsList.length) return
				// 1、左边的商品分类
				const classArr = this.goodsList.map(item => {
					return item.optidata
				})
				this.categoryList = [...new Set(classArr)]
				// 2、初始化分类名称
				this.currentCategoryTitle = this.categoryList[0]
				// 3、初始化当前分类商品详情
				this.categoryDetail = this.goodsList.filter(item => {
					return item.optidata === this.categoryList[0]
				})
			}
		},
		destroyed() {
			this.clearCart()
		},
		methods: {
			...mapMutations(['clearCart']),
			// 左边商品分类的切换
			categoryClick(index, name) {
				this.leftSelect = index
				this.currentCategoryTitle = name
				// 更新分类详情列表
				this.categoryDetail = this.goodsList.filter(item => {
					return item.optidata === name
				})
			},
			// 下单
			placeOrder() {

			}
		}
	}
</script>

<style scoped>
	.ordering-fls {
		display: flex;
		justify-content: space-between;
	}

	/* 左边商品分类 */
	.ordering-left {
		width: 190upx;
		background: #fafafa;
		overflow-y: auto;
		height: 100%;
	}

	.ordering-left text {
		color: #a8a8a8;
		display: block;
		font-size: 28upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}

	.activeord {
		background: #FFFFFF !important;
		font-weight: bold !important;
	}

	/* 右边 */
	.ordering-right {
		width: 100%;
		padding: 9upx 9upx 130upx 9upx;
		overflow: hidden;
		overflow-y: auto;
	}

	.activeord {
		background: #FFFFFF !important;
		font-weight: bold !important;
	}

	.ordering-right-title {
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		font-weight: bold;
	}

	/* 购物车 */
	.Shopping {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
	}

	.Shopping-left {
		height: 130upx;
		background: #000000;
		flex-grow: 2;
		border-top-left-radius: 50upx;
		border-bottom-left-radius: 50upx;
	}

	.Shopping-right {
		height: 130upx;
		line-height: 130upx;
		font-size: 30upx;
		color: #7f7f7f;
		text-align: center;
		background: #000000;
		flex-grow: 1;
		border-top-right-radius: 50upx;
		border-bottom-right-radius: 50upx;
	}

	.Shopping-dis {
		display: flex;
		height: 130upx;
		margin: 0 20upx;
	}

	.qishou {
		width: 120upx;
		height: 150upx;
		position: fixed;
		bottom: 0upx;
		left: 50upx;
	}

	.qishou image {
		width: 120upx;
		height: 150upx !important;
	}

	/* 定位 */
	.Delivery {
		color: #999999;
		font-size: 28upx;
		height: 65upx;
	}

	.Shopping-left text {
		display: block;
	}

	.Total-price {
		font-size: 40upx;
		color: #FFFFFF;
		height: 65upx;
		line-height: 65upx;
	}

	.Cost-mony {
		padding-left: 170upx;
		color: #4CD964;
		height: 130upx;
	}

	/* 数量 */
	.Numbering {
		background: red;
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		font-size: 20upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		position: fixed;
		bottom: 50upx;
		left: 130upx;
	}

	/* 选中菜品 */
	.shoppactive {
		background: #ffd300 !important;
		color: #000000 !important;
	}
</style>
